<template>
<!--
 1.展示题组信息页面分析
 1.1 from表单 + button按钮（清除和搜索）
 1.2 查询到的数据总数 div圆角边框加灰色背景
 1.3 table表格 表格加自定义列
 1.4 完整分页
 2.预览试题详细信息
 2.1点击试题编号（文字按钮，携带试题编号和对话框状态true） => 打开对话框  => 预览页面布局  => 页面数据渲染
 -->
<div class='container'>
  <el-card class="box-card">
    <!-- 头部筛选 -->
    <el-form :model="form" :inline="true"  :rules="rules"  ref="keyFrom" label-width="100px" class="demo-ruleForm" size ="medium">
      <el-form-item label="关键字" prop="keyword">
          <el-input type="keyword" v-model="form.keyword" placeholder="请输入内容"></el-input>
      </el-form-item>
       <el-form-item style="float:right">
          <el-button  @click="cancel(form.keyword)" style="margin-right:10px">清除</el-button>
          <el-button @click="search(form.keyword)" type="primary" :loading ="isLoading">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 总条数 -->.
    <el-col :span="24">
    <div class="amount">
      <i class="el-icon-info"></i><span style="padding-left:10px">数据一共{{total}}条</span>
    </div>
    </el-col>
    <!-- /总条数 -->
    <!-- 内容表单 -->
   <el-table
      :data="isciplineList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="200">
      </el-table-column>
      <el-table-column
        label="题型"
        width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.questionType === '1'">单选</span>
        <span v-else-if="scope.row.questionType === '2'" type="info">多选</span>
        <span v-else-if="scope.row.questionType === '3'" type="info">简答</span>
      </template>
      </el-table-column>
      <el-table-column
      label="题目编号"
      width="280">
      <template slot-scope="scoped">
       <div  ></div>
       <el-button
       v-for="(item,index) in scoped.row.questionIDs" :key="index"
        type="text"
        @click="particulars(item.id)">{{ item.number}}</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间">
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(s)">
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)">
    </el-table-column>
     <el-table-column
      prop="userName"
      label="录入人">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
         <el-button type="danger"
          icon="el-icon-delete"
          circle
          @click="handleDelete(scope.$index, scope.row)">
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- /内容表单 -->
    <!-- 完整分页 -->
    <el-pagination
     style="margin:20px 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(pagination.page)"
      :page-sizes="[20, 30, 40, 50]"
      :page-size="Number(pagination.pagesize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- /完整分页 -->
  </el-card>
  <!-- 浏览题组信息 -->
     <el-dialog
     title="题目预览"
     :visible.sync="dialogVisible"
     :before-close="close"
     width="60%">
    <!-- 题组基本信息 -->
    <div class="information">
      <table border="0" width="100%">
       <tr>
        <td  v-show="answer.questionType==1">【题型】：<span>单选</span></td>
        <td  v-show="answer.questionType==2">【题型】：<span>多选</span></td>
        <td  v-show="answer.questionType==3">【题型】：<span>简答</span></td>
        <td>【编号】：<span>{{answer.id}}</span></td>
        <td  v-show="answer.difficulty==1">【难度】 <span>简单</span></td>
        <td  v-show="answer.difficulty==2">【难度】：<span>一般</span></td>
        <td  v-show="answer.difficulty==3">【难度】：<span>困难</span></td>
        <td>【标签】：<span>{{answer.tags}}</span></td>
      </tr>
      <tr>
        <td>【学科】：<span>{{answer.subjectName}}</span></td>
        <td>【目录】：<span>{{answer.directoryName}}</span></td>
        <td>【方向】：<span>{{answer.direction}}</span></td>
      </tr>
    </table>
    </div>
    <!-- /题组基本信息 -->
     <el-divider></el-divider>
    <!-- 题干信息 -->
      <span>【题干】:</span>
      <p style="color:#4c4cff" v-html="answer.question"></p>
      <!-- 单选题 -->
      <div class="single" v-show="answer.questionType == 1? true: false">
        <p>单选题 选项：(以下选项中的为正确答案)</p>
        <el-radio-group :value ="1">
          <el-radio  v-for="item in answer.options" :key="item.id" :label="item.isRight">{{item.title}}</el-radio>
       </el-radio-group>
      </div>
      <!-- 多选题 -->
      <div class="multiple" v-show="answer.questionType == 2? true: false">
        <p>多选题 选项：(以下选项中的为正确答案)</p>
        <el-checkbox-group :value ="[1]">
         <el-checkbox   v-for="item in answer.options" :key="item.id" :label="item.isRight">{{item.title}}</el-checkbox>
        </el-checkbox-group>
      </div>
    <el-divider></el-divider>
    <!-- 试题答案 -->
    <div class="vidbom">
      <span>【参考答案】: </span><el-button type="danger" @click="Ondiv()">视频答案预览</el-button>
    </div>
    <!-- 视频答案 -->
    <div class="video1">
      <video  width="400" height="300" controls  autoplay v-if="vid" >
        <source :src="answer.videoURL"  type="video/mp4">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div>
     <el-divider></el-divider>
      <p>【答案解析】: <span v-html="answer.answer"></span> </p>
     <el-divider></el-divider>
      <span>【题目备注】: {{ answer.remarks}} </span>
    <!-- /试题答案 -->
    <!-- 关闭按钮 -->
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="close">关闭</el-button>
     </span>
     <!-- 关闭按钮 -->
    </el-dialog>
  <!-- /浏览题组信息 -->
</div>
</template>
<script>
// 导入api 题组列表randoms 删除removeRandoms 题库详情detail
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  // 组件名字
  name: 'containerIndex',
  // 数据项配置
  data () {
    return {
      // 表单验证规则
      rules: {
        keyword: [
          { required: true, message: '请输入搜索内容', trigger: 'blur' }
        ]
      },
      isLoading: false, // loading效果
      answer: [], // 试题详情
      number: null, // 试题编号
      vid: false, // 控制视频显示和隐藏
      form: {
        keyword: null // 关键字搜索
      },
      isciplineList: [], // 学科内容
      // 页码和每页多少条
      pagination: {
        page: 1,
        pagesize: 20
      },
      // 数据一共xxx条
      total: 0,
      // 控制对话框
      dialogVisible: false
    }
  },
  methods: {
    // 初始化学科数据
    goIscipline () {
      this.getIscipline()
    },
    // 获取学科数据
    async getIscipline () {
      const { data: res } = await randoms(this.pagination)
      console.log('学科数据信息', res)
      this.isciplineList = res.items // 保存数据到数据项
      // 获取总条数
      this.total = res.counts
      return { data: res } // return出去获取的数据监听时使用
    },
    // 表单验证 + 清除
    cancel (keyword) {
      // console.log('获取清除验证的表单',this.$refs.keyFrom)
      if (keyword) {
        this.form.keyword = null
        try {
          const res = this.getIscipline()
          this.isciplineList = res.items
        } catch (err) {
          console.log('失败', err)
        }
      } else {
        //  this.$message.warning('你还没有搜索过信息!')
        this.$refs.keyFrom.resetFields()
      }
    },
    // 基本取消
    //  async cancel () {
    //    if (this.form.keyword) {
    //       this.form.keyword = null
    //       const res = await this.getIscipline ()
    //    try {
    //          this.isciplineList = res.items
    //       }
    //     catch (err) {
    //         console.log(err)
    //       }
    //    } else {
    //     this.$message.warning('你还没有搜索过信息!')
    //    }
    // },
    // 表单验证+搜索
    search (keyword) {
      this.isLoading = true
      this.$refs.keyFrom.validate(async (keyword) => {
        // console.log('获取验证的表单',this.$refs.keyFrom)
        if (keyword) {
          try {
            // 携带参数发请求
            const res = await randoms({
              keyword: this.form.keyword
            })
            // console.log('搜索的结果',res)
            // 把返回的数据给对应的数据项
            this.isciplineList = res.data.items
            this.total = res.data.counts
            this.isLoading = false
          } catch (err) {
            console.log(err)
          }
        } else {
          this.isLoading = false
          console.log('没输入搜索信息!!')
          // return false;
        }
      })
    },
    // 基本搜索
    // async search (keyword) {
    //   this.isLoading = true
    //   if (keyword) {
    //   const res = await randoms({
    //    keyword
    //  })
    //  try {
    //     // console.log('搜索的结果',res)
    //     this.isciplineList =res.data.items
    //     this.isLoading = false
    //  }
    //  catch (err) {
    //    console.log(err)
    //  }
    //  } else {
    //     this.$message.warning('请先输入要搜索的关键字!')
    //   }
    // },
    // 删除学科
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除学科信息 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          const Id = row.id
          console.log('当前学科的id', Id)
          await removeRandoms({ id: Id })
            .then((id) => {
              this.isciplineList.splice(id, 1)
              this.$message.success('成功删除了此学科' + '!')
              this.getIscipline(this.pagination)
            })
            .catch((res) => {
              console.log(res)
            })
        })
        .catch((res) => {
          console.log(res)
          this.$message.info('已取消操作!')
        })
    },
    // 试题详情
    async particulars (val) {
      const strId = val
      console.log('当前试题id', strId)
      // 打开对话框val
      this.dialogVisible = true
      // 传参
      const res = await detail({ id: strId })
      console.log('试题详细', res)
      this.answer = res.data
    },
    // 每一个页面展示的信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      if (this.pagination.page === 1) {
        this.getIscipline(this.pagination)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getIscipline()
    },
    // 视频按钮
    Ondiv () {
      if (this.answer.videoURL) {
        this.vid = !this.vid
      } else {
        this.$message.success('很遗憾视频答案解析不存在' + '!')
      }
    },
    // 关闭页面
    close () {
      // 关闭视频
      this.vid = false
      this.dialogVisible = false
    }
  },
  // 侦听器 不点击清除，键盘手动清除触发
  watch: {
    'form.keyword': function (newVal) {
      if (this.form.keyword === '') {
        try {
          const res = this.getIscipline()
          console.log('侦听器', res)
          this.isciplineList = res.items
        } catch (err) {
          console.log(err)
        }
      }
    }
  },
  created () {
    // 调用初始化数据方法
    this.goIscipline()
  }
}
</script>
<style scoped>
el-form-item.el-form-item__label {
  font-size:17px;
}
/* 总数样式 */
.el-col{
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  color:#9ea1a6;
  background-color: #f4f4f5;
  border-radius: 6px;
}
/* 总数图标样式 */
.el-icon-info{
padding-left:25px;
font-size: 25px;
line-height: 40px;
color: #909399;
}
/* 分页按钮样式 */
.el-pagination{
  float:right
}
/* 分割线 */
.el-divider--horizontal{
  margin:15px 0;
}
/* 单选框答案 */
.el-checkbox, .el-checkbox__input {
  display: block;
  margin-top: 10px;
}
/* 试题编号对齐 */
.el-button+.el-button{
  margin-left: 0px;
}
/* 复选框答案 */
.el-radio, .is-checked {
display: block;
margin-top: 10px;
}
/* 处理文本超长 */
td {
display:inline-block;
width:25%;
height: 40px;
line-height: 40px;
/*超出部分用....代替*/
white-space: nowrap;
/*不换行*/
text-overflow: ellipsis;
/*超出隐藏*/
overflow: hidden
}
</style>
